/* eslint-disable no-unused-vars */
import React, { memo, useCallback } from "react";
import { Icon } from "@antmjs/vantui";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useSelector, useDispatch, shallowEqual } from "react-redux";
import debounce from "lodash/debounce";
import { updateState } from "@/store/actions/global";
import "./index.less";

const Index = (props) => {
    const { top } = props;
    const { globalData } = useSelector(
        (state) => ({ globalData: state.globalData }),
        shallowEqual
    );
    const { isLogin, basket, basketUpdate } = globalData;
    const dispatch = useDispatch();
    const handleBasket = useCallback(
        debounce(() => {
            const url = '/pages/basket/index';
            if (!isLogin) {
                dispatch(updateState({
                    isShowGrant: true
                }))
            } else {
                jumpTo(url)
            }
        },
            500,
            {
                leading: true,
                trailing: false,
            }
        ), [isLogin]);
    const jumpTo = (url) => {
        Taro.navigateTo({
            url
        });
    }
    return (
        <>
            {isLogin && basket.length > 0 ?
                <View className='basket-nav' onClick={handleBasket} style={{top:top}}>
                    <Icon name='bag-o' color='#ffffff' size='50' className='icon-basket' dot={basketUpdate} />
                </View> : null}
        </>
    );
};

export default memo(Index);
